import React, { useEffect, useState } from "react";
import { Modal } from "../components";

export const LoadingDemo = () => {
  const [open, setOpen] = useState("");
  const [loading, setLoading] = useState("");

  useEffect(() => {
    if (open === "content") {
      setTimeout(() => {
        setLoading("");
      }, 3000);
    }
  }, [open]);

  const onViewContent = () => {
    setLoading("content");
    setOpen("content");
  };

  return (
    <>
      <div>
        <div className="primary-btn" onClick={onViewContent}>
          内容Loading
        </div>
        <div
          style={{ marginLeft: 10 }}
          className="primary-btn"
          onClick={() => setOpen("confirm")}
        >
          confirmLoading
        </div>
      </div>
      <Modal
        title="Modal Title"
        open={open === "content"}
        loading={loading === "content"}
        onClose={() => setOpen("")}
        onConfirm={() => {
          console.log("onConfirm");
          setOpen("");
        }}
      >
        弹窗内容
        <div>show everything you want here</div>
      </Modal>

      <Modal
        title="Modal Title"
        open={open === "confirm"}
        confirmLoading={loading === "confirm"}
        onClose={() => setOpen("")}
        onConfirm={() => {
          setLoading("confirm");
          setTimeout(() => {
            setLoading("");
            setOpen("");
          }, 3000);
        }}
      >
        弹窗内容
        <div>show everything you want here</div>
      </Modal>
    </>
  );
};
